<script setup>
/**
 * 骨架图
 */
import {computed} from 'vue'
const props = defineProps({
  row:{
    type:Number,
    default:3
  },
  pos:{
    type:String,
    default:'center'
  }
})
const posStyles = computed(()=>{
  return {
    'align-items':props.pos, // 三个值：flex-start,flex-end,center
  }
})

</script>

<template>
  <div class="skeleton-container" :style="posStyles">
    <div class="skeleton">
      <van-skeleton title avatar :row="row"/>
    </div>
  </div>
</template>

<style scoped lang="scss">

/*css 骨架图*/
.skeleton-container{
  position: fixed;
  left:0;
  right:0;
  top:0;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:20px;
  width:100%;
  min-height: 100vh;
  background: #fff;
  .skeleton{
    width:100%;
    height:100%;
  }
}
</style>